@import 'styles/variables'

.places__choosing
  &_header
    display: flex
    justify-content: space-between
    background: $orange-pale-2
    padding-inline: 32px 16px
    padding-block: 5px

  &_railcars
    display: flex
    align-items: baseline

  &_remark
    display: flex
    align-items: center

    font-size: 1rem
    color: #292929

  &_info
    display: flex

.railcar
  &__list
    display: flex
    gap: 0.75em
    margin-left: 0.5em

  &__item
    font-size: 1.5rem
    font-weight: 700
    color: #2D2B2F

    cursor: pointer

    &.selected
      color: white

  &__text
    font-size: 1.125rem

.places__choosing_railcar:not(:first-child)
  padding-top: 35px
  border-top: 1px dashed #C4C4C4
  margin-top: 80px

.railcar__number
  background: #FFD98F
  min-width: 190px
  padding: 35px
  color: #292929

  &_digit
    font-weight: 700
    font-size: 4.5rem
    white-space: nowrap

  &_text
    font-size: 1.5rem
    padding-left: 3px

.places__choosing_selected-count
  max-width: 200px
  background: #F3F3F3
  border-radius: 5px
  font-size: 1rem
  margin-block: 5px
  margin-inline: auto 40px
  padding: 15px

  color: #292929

.places__choosing_list
  width: 100%
  padding-inline: 20px

.places__price
  font-size: 1.5rem
  color: #928F94
  margin: 25px 40px 30px
  text-align: right

  &_number
    font-weight: 700
    color: #FFA800
